<%--
    Document   : addDishToMenu
    Created on : Feb 26, 2013, 4:26:06 PM
    Author     : nhunhu
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Add Dish To Menu</title>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>

        <script type="text/javascript" src="js/DietJS.js"></script>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            var xmlhttp;
            var xmlDoc;
            var timeParam = getParameter("time");
            var dateParam = getParameter("date");

            function loadDishXMLDoc(){
                xmlhttp = getXMLHttpRequest();
                xmlhttp.open("GET","xml/Dishes.xml",false);
                xmlhttp.send();
                xmlDoc=xmlhttp.responseXML;
            }
            function searchDish(str){
                //loadDishXMLDoc();
                var dishes = xmlDoc.getElementsByTagName("dish");//list Dishes
                var result = [];
                for(var i = 0; i<dishes.length; i++){
                    if(dishes[i].nodeName=="dish"){
                        var dishNameNode = dishes[i].getElementsByTagName("dishName")[0];
                        var compare = dishNameNode.firstChild.nodeValue;
                        compare = compare.toUpperCase();
                        str = str.toUpperCase();
                        if( compare.indexOf(str)>-1){
                            var dishID = dishes[i].getElementsByTagName("dishID")[0].childNodes[0].nodeValue,
                            dishName = dishes[i].getElementsByTagName("dishName")[0].childNodes[0].nodeValue,
                            dishTypeId = dishes[i].getElementsByTagName("dishTypeId")[0].childNodes[0].nodeValue,
                            calories = dishes[i].getElementsByTagName("calories")[0].childNodes[0].nodeValue,
                            imageURL = dishes[i].getElementsByTagName("imageURL")[0].childNodes[0].nodeValue,
                            time = dishes[i].getElementsByTagName("time")[0].childNodes[0].nodeValue,
                            countView = dishes[i].getElementsByTagName("countView")[0].childNodes[0].nodeValue,
                            cooking = dishes[i].getElementsByTagName("cooking")[0].childNodes[0].nodeValue,
                            userID = dishes[i].getElementsByTagName("userID")[0].childNodes[0].nodeValue,
                            status = dishes[i].getElementsByTagName("status")[0].childNodes[0].nodeValue;

                            if (time.toUpperCase().match(timeParam.toUpperCase())) {
                                result.push({
                                    dishID : dishID,
                                    dishName: dishName,
                                    dishTypeId: dishTypeId,
                                    calories: calories,
                                    imageURL: imageURL,
                                    time: time,
                                    countView: countView,
                                    cooking: cooking,
                                    userID: userID,
                                    status: status
                                });
                            }

                        }
                    }
                }

                var resultContainer = document.getElementById("result-container");
                var htmlString = "";
                htmlString += "<table class='table table-striped table-hover' border='1' align=center>"
                    + "<tr>"
                    + "<th width=100>"
                    + "</th>"
                    + "<th width=500>"
                    + "Tên món ăn"
                    + "</th>"
                    + "<th width=150>"
                    + "Lượng Calories"
                    + "</th>"
                    + "<th width=100>"
                    + "Hình ảnh"
                    + "</th>"
                    + "<th>"
                    + "</th>"
                    + "</tr>";
                for (var i = 0; i < result.length; i++) {
                    htmlString +="<tr>";
                    htmlString +="<td>";
                    htmlString += (i + 1);
                    htmlString +="</td>";
                    htmlString +="<td>";
                    htmlString +=result[i].dishName + " ";
                    htmlString +="</td>";
                    htmlString +="<td>";
                    htmlString +=result[i].calories + " ";
                    htmlString +="</td>";
                    htmlString +="<td>";
                    htmlString +="<img class='img-rounded' height='100' width='100' src='http://" + document.location.host + "/DietPlanning/images/dish/" + result[i].imageURL + "' />";
                    htmlString +="</td>";
                    htmlString +="<td>";
                    htmlString +="<a href='javascript:void(0);' id='" + result[i].dishID + "' onclick='addMenu(this.id)'><i class='icon-plus-sign'></i></a>";
                    htmlString +="</td>";
                    htmlString +="</tr>";
                }
                htmlString += "</table>";
                resultContainer.innerHTML = htmlString;
            }

            function beforeSubmitHandle(value) {
                var resultContainer = document.getElementById("result-container");
                resultContainer.innerHTML = "";
                searchDish(value);
            }

            function addMenu(dishID) {

                xmlhttp = getXMLHttpRequest();
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {                         
                        var res = xmlhttp.responseText;
                        if(res=="Fail"){
                            alert('Không thể thêm món ăn mới!')                                                       
                        }else
                            {
                                alert('Thêm món ăn thành công'); 
                                window.self.location='diet.jsp';
                            }
                    }
                }
                xmlhttp.open("POST", "AjaxAddDishToMenu", false);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send("dishID="+ dishID + '&time='+timeParam + '&date='+dateParam);
            }

            function getParameter( name ){
                name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
                var regexS = "[\\?&]"+name+"=([^&#]*)";
                var regex = new RegExp( regexS );
                var results = regex.exec( window.location.href );
                if( results == null ) {
                    return "";
                }
                else {
                    return results[1];
                }
            }
        </script>
    </head>
    <body onload="loadDishXMLDoc()">
        <jsp:include page="homeHeader.jsp"/>
        <br/><br/>
        <div class="searchDish">
            <div class="search_box" style="padding-left: 250px;" >

                Tên món ăn: <input type="text" name="txtSearchDishName"  id="inputSearchText" value="" onkeyup="searchDish(this.value)" />
                <input type="button" class="btn btn-primary" value="Tìm kiếm" name="action" id="btnSearch"
                       onclick="beforeSubmitHandle(document.getElementById('inputSearchText').value)"/>

            </div>
            <br/>
            <div id="body-container" style="width: 800px;height: 800px; padding-left: 250px;" align="center">
                <div id="result-container">
                </div>
            </div>
        </div>
        <div id="success" class="alert alert-success" style="display: none">
            <button class="close" data-dismiss="alert" type="button">×</button>
            <strong>Well done!</strong>
                Bạn đã thêm thành công món ăn vào thực đơn!
        </div>
    </body>
</html>
